require(['./config'], () => {

    require(['template', 'header', 'footer', 'zoom','fly'], (template) => {
        class Detail {
            //出厂说明
            constructor() {
                this.init().then(() => {
                    this.addToCart()
                    this.zoom()
                })
            }
            init() {
                // init方法只负责数据渲染页面，其他事情交给then调用
                //h获取页面的id值
                const id = Number(window.location.search.slice(4))
                //更具id请求后端接口拿到当前商品的详情数据

                return new Promise((resolve, reject) => {
                    $.get('http://rap2api.taobao.org/app/mock/244994/detail', { id }, resp => {
                        //判断code是否为200
                        if (resp.code === 200) {
                            //结构赋值
                            const { detail } = resp.body
                            //由于rap2没有id，手动添加id，将来换成真实接口就不需要了
                            //
                            this.detail = { ...detail, id }
                            //渲染详情页
                            //吧detail展开，所有属性全部传进去

                            $('#design').html(template('detailTemplate', { ...this.detail }))
                            //异步成功，承诺兑现
                            resolve()
                        }
                    })
                })


            }

            //fly 抛物线
            fly (e) {
                $(`<img style="width: 40px; height: 40px; border-radius: 50%;" src="${this.detail.imgs[0]}">`).fly({
                  start:{
                    left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                    top: e.clientY,  //开始位置（必填）
                  },
                  end:{
                    left:20, //结束位置（必填）
                    top: 600,  //结束位置（必填）
                    // width: 100, //结束时高度
                    // height: 100, //结束时高度
                  },
                  // autoPlay: false, //是否直接运动,默认true
                  speed: 1.1, //越大越快，默认1.2
                  vertex_Rtop: 120, //运动轨迹最高点top值，默认20
                  onEnd: function(){
                    // console.log('end')
                    // 移出DOM
                    this.destroy()
                  } //结束回调
                })
              }


            addToCart() {
                
                //获取购物车的点击事件
                //判断购物车有没有商品，如果有加上
                $('#add-to-cart-btn').on('click',(e)=>{
                    this.fly(e)
                    //大当前的详情数据放在购物车里面
                    //localStorage
                    //得到的是字符串
                    let cart =window.localStorage.getItem('cart')
      
                     //判断购物车有没有商品，
                    if(cart){
                        //购物车有数据   讲 JSON 字符串转化为  数组或者对象
                    cart =JSON.parse(cart)
                  
//判断当前商品在购物车是否重复 用id判断  现在id，很this。detal。id是否一样   用some   shop代表遍历出来的东西，some，方法用return
                        const isExist=cart.some(shop=>{
                            return shop.id ===this.detail.id
                        })
// console.log(isExist) //已经存在是ture，不存在是false
                        if(isExist){//代表已经存在   只需要把当前商品的count属性加一
                          //map 映射，返回一个新的数组  返回新的数组   要return
                            cart = cart.map(shop=>{
                                if(shop.id===this.detail.id){
                                    shop.count++
                                }
                                return shop
                            })


                        }else{
                            // 商品不存在
                            cart.push({...this.detail,count:1,check:true})
                        
                        }

                    // cart.push(this.detail)
                    //吧push之后的数据更新以前的，并且覆盖  无论id还是else
                   window.localStorage.setItem('cart',JSON.stringify(cart))
                    }else{
                        //购物车为空                    数组或者对象 转换为一个 JSON 字符串
           window.localStorage.setItem('cart',JSON.stringify([{...this.detail,count:1,check:true}]))
           //相当于下面两句
        //    const arr=[
        //        {...this.detail,count:1}
        //    ]
        //    window.localStorage.setItem('cart',JSON.stringify(arr))
                    }
                
                   
                })

            }








            // 放大镜
            zoom() {
      
                // $('.zoom-image').elevateZoom()
                $('.zoom-image').elevateZoom({
                    //制定切换的id  这id不写#号
                    gallery: 'gall'
                })
            }







        }
        // http://rap2api.taobao.org/app/mock/244994/detail

        new Detail()
    })

})